<template>
	<view class="demand-item" @click="onClick">
		<view class="demand-left">
			<view class="demand-title" v-html="item.title"></view>
			<view class="demand-company"><label v-html="item.userName"></label>·<label v-html="item.company"></label></view>
			<view class="demand-main">
				<label class="demand-num">{{item.num}}人</label>
				<label class="demand-time">{{item.time}}</label>
				<label class="demand-type"><text>{{item.typeName}}</text></label>
			</view>
		</view>
		<view class="demand-right">
			<image class="slot-image" :src="item.companyIcon" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				item:this.options
			}
		},
		props:{
			options:{
				type:Object,
				default:{}
			},
			searchValue:{
				type:String,
				default:""
			}
		},
		mounted(){
			if(this.searchValue){
				if(this.item.title )
				this.item.title = this.item.title.replace(this.searchValue,'<label style="color:red">'+this.searchValue+'</label>')
				if(this.item.userName )
				this.item.userName = this.item.userName.replace(this.searchValue,'<label style="color:red">'+this.searchValue+'</label>')
				if(this.item.company )
				this.item.company = this.item.company.replace(this.searchValue,'<label style="color:red">'+this.searchValue+'</label>')
				this.$forceUpdate()
			}
		},
		methods:{
			onClick:function(){
				this.$emit("click",this.options.id)
			}
		}
	}
</script>

<style>
	.demand-item{
		padding:28rpx 32rpx;
		display: flex;
		box-shadow: 0px 3rpx 8rpx rgba(0, 0, 0, 0.16);
		border-radius: 4rpx;
		margin: 0 5rpx 48rpx 5rpx;
	}
	.demand-left{
		flex: 1;
	}
	.demand-right{
		width: 122rpx;
		height: 122rpx;
	}
	.demand-right image{
		width: 122rpx;
		height: 122rpx;
	}
	.demand-title{
		font-size: 34rpx;
		color: #181818;
		font-weight: 500;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.demand-company{
		font-size: 26rpx;
		color: #7b7b7b;
		margin: 15rpx 0;
	}
	.demand-company label{
		display: inline-block;
	}
	.demand-num {
		background-image: url(../static/images/icon_renshu@3x.png);
	}
	
	.demand-time {
		background-image: url(../static/images/icon_shijian@3x.png);
	}
	
	.demand-type {
		background-image: url(../static/images/icon_fenlei@3x.png);
	}
</style>
